<template>
  <div id="app1">
    <div class="box">
      <!-- 以下是默认配置参数, 可以根据个人需要进行修改 -->
      <img src="../../assets/images/back.png" class="im" alt="">
      <LuckDraw
        ref="luckDraw"
        v-model="currIndex"
        :awards="awards"
        :rate="rate"
        :radius="radius"
        :textFontSize="textFontSize"
        :lineHeight="lineHeight"
        :textColor="textColor"
        :textMargin="textMargin"
        :textPadding="textPadding"
        :btnFontSize="btnFontSize"
        :btnColor="btnColor"
        :btnBorderColor1="btnBorderColor1"
        :btnBorderColor2="btnBorderColor2"
        :btnBorderColor3="btnBorderColor3"
        :btnBgColor="btnBgColor"
        :btnText="btnText"
        :btnRadius="btnRadius"
        :borderColor="borderColor"
        :async="true"
        @before-start="handleStart2"
        @end="handleEnd"
        class="can"
      />
      <img class="btn" @click="showHistory" src="../../assets/images/btn.png" alt="" srcset="">
    </div>
    <div class="historyAlert" v-if="state">
      <div class="center">
        <div class="top">
          <p>积分消耗记录</p>
        </div>
        <div class="list">
          <div class="item" v-for="(item,index) in list" :key="index">
            <div>
              <p>积分扣除</p>
              <p>-{{item.consumeIntegral}}</p>
            </div>
            <span>{{item.createTime}}</span>
          </div>
        </div>
        <p class="close" @click="hide">知道了</p>
      </div>
    </div>
  </div>
</template>

<script>
import { consumptionIntegral, getMemberIntegral, Record } from '@/api/api';
import {
  setLocalStorage,
  getLocalStorage,
  getUrlParams
} from '@/utils/local-storage';
import { Dialog } from 'vant';
import { constants } from 'zlib';
export default {
  data() {
    return {
      currIndex: 0, // 奖品的索引
      rate: 80, // 转盘速率
      radius: 160, // 转盘半径
      textFontSize: '13px', // 文字大小
      lineHeight: 20, // 文字行高
      textColor: '#ffffff', // 文字颜色
      textMargin: 30, // 文字距离边框距离
      textPadding: 0, // 文字补偿宽度
      btnFontSize: '26px', // 按钮文字大小
      btnColor: '#d64737', // 按钮文件颜色
      btnBorderColor1: '#d64737', // 按钮外边框颜色
      btnBorderColor2: '#ffffff', // 按钮内边框颜色
      btnBorderColor3: '#f6c66f', // 按钮指针颜色
      btnBgColor: '#ffdea0', // 按钮背景颜色
      btnText: '抽奖', // 按钮内容
      btnRadius: 60, // 按钮半径
      borderColor: '#d64737', // 边框颜色
      awards: [
        // 奖品
        { name: '200-10元加油券', color: '#FC4F2D', id: 2000378 },
        { name: '100-5元加油券', color: '#FC7E47', id: 2000376 },
        { name: '再来一次', color: '#FC4F2D' },
        { name: '谢谢参与', color: '#FC7E47' },
        { name: '66积分', color: '#FC4F2D' },
        { name: '1000积分', color: '#FC7E47' },
        { name: '再来一次', color: '#FC4F2D' },
        { name: '谢谢参与', color: '#FC7E47' }
      ],
      array: [],
      integra: '',
      tel: '',
      memberId: '',
      state: false,
      list: [],
      index: '',
      bok:true
    };
  },
  methods: {
    handleStart2() {
      if (this.integra < 10000) {
        Dialog.alert({
          title: '提示',
          message: '积分不足，无法参与抽奖活动'
        });
        return false;
      }
      if(!this.bok){
        return false
      }
      this.bok = false
      this.index = this.lottery();
      this.$refs.luckDraw.play(this.index);

      if (this.index == 3) {
        consumptionIntegral({ integral: 100 }).then(res => {
          console.log(res);
          this.integra -= 10000;
        });
      } else if (this.index == 2) {
      } else {
        consumptionIntegral({
          integral: 100,
          couponId: this.awards[this.index].id
        }).then(res => {
          console.log(res);
          this.integra -= 10000;
          localStorage.setItem('userIntegra', this.integra);
          this.showHistory()
        });
      }
    },
    handleEnd(index) {
      Dialog.alert({
        title: '抽奖结果',
        message: this.awards[this.index].name
      });
      this.bok = true
    },
    lottery() {
      function arrOverAdd(arr) {
        if (!arr || arr.length <= 0) {
          return [];
        } else {
          var temp = [];
          for (var i = 0; i < arr.length; i++) {
            if (i == 0) {
              temp[i] = parseInt(arr[i]);
            } else {
              temp[i] = temp[i - 1] + parseInt(arr[i]);
            }
          }
          return temp;
        }
      }
      /**
       * 获取数组中最接近的值得index
       * @param random 随机数
       * @param weightArray 权重数组
       * @returns {number}
       */
      function getArrIndex(random, weightArray) {
        var index = 0;
        if (random <= weightArray[0]) {
          return 0;
        } else if (random >= weightArray[weightArray.length - 1]) {
          index = weightArray.length - 1;
          return index;
        } else {
          for (var i = 0; i < weightArray.length; i++) {
            if (random <= weightArray[i]) {
              index = i;
            } else if (
              random > weightArray[i] &&
              random <= weightArray[i + 1]
            ) {
              index = i + 1;
              break;
            } else if (
              random > weightArray[i] &&
              random <= weightArray[i + 1]
            ) {
              index = i + 1;
              break;
            }
          }
        }
        return index;
      }
      var weightArr = [5, 5, 30, 60];
      weightArr = arrOverAdd(weightArr);
      var totalWeight = weightArr[weightArr.length - 1];

      var random = Math.random() * totalWeight;
      var arrIndex = getArrIndex(random, weightArr);
      console.log(arrIndex);
      return arrIndex;
    },
    printLogRandom() {
      var arr = [];
      for (var i = 1; i <= 100; i++) {
        this.handleStart();
        if (i >= 100) {
          this.array.sort();
          for (var i = 0; i < this.array.length; ) {
            var n = 0;
            for (var j = i; j < this.array.length; j++) {
              if (this.array[i] == this.array[j]) {
                n++;
              }
            }
            arr.push({ key: this.awards[this.array[i]].name, cont: n });
            i += n;
          }
        }
      }
      for (var i = 0; i < arr.length; i++) {
        arr[i].key = arr[i].key + '抽奖概率测试' + arr[i].cont + '%';
        console.log(arr[i].key);
      }
    },
    getIntergral() {
      getMemberIntegral({ phone: getUrlParams('phone') }).then(res => {
        console.log(res.data);
        this.integra = res.data.data;
      });
    },
    showHistory() {
      Record({ phone: this.tel }).then(res => {
        if (res.data.data && res.data.data.length) {
          let arr = [];
          res.data.data.map(item => {
            item.consumeIntegral = item.consumeIntegral / 100;
            if (item.consumeIntegral > 0) {
              arr.push(item);
            }
          });
          this.list = arr;
          this.state = true;
        } else {
          alert('暂无兑换记录');
        }
      });
    },
    hide() {
      this.state = false;
    }
  },
  mounted() {
    this.getIntergral();

    this.tel = getUrlParams('phone');
    console.log(this.tel);
    console.log(this.integra);
  }
};
</script>

<style lang="scss" scoped>
.view-router{
  background: transparent;
}
#app1{
  overflow: hidden;
}
.box{
  overflow: hidden;
}
.item {
  border-bottom: 1px solid #f2f6fc;
  height: 64px;
}
.item > div {
  display: flex;
  justify-content: space-between;
}
.item > div p:nth-of-type(1) {
  font-size: 12px;
  color: #000;
}
.item > div p:nth-of-type(2) {
  color: #ff6969;
  font-size: 12px;
  margin-right: 14px;
}
.item > span {
  color: #a4abb3;
  font-size: 12px;
}
.historyAlert {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: -100px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  max-height: 100vh;
  overflow: hidden;
  justify-content: center;
  -webkit-overflow-scroll: touch;
}
.list {
  width: 251px;
  height: 272px;
  background: #fff;
  border-radius: 6px;
  overflow-y: scroll;
  margin: 17px auto 13px;
  padding-left: 14px;
}
.center {
  width: 292px;
  height: 425px;
  background: #ff6969;
  border-radius: 7px;
  overflow: hidden;
  z-index: 99999;
}
.top {
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 105, 105, 1) 0%,
    rgba(244, 69, 69, 1) 100%
  );
  width: 780px;
  margin-top: -673px;
  height: 750px;
  margin-left: -246px;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 54px;
  font-size: 16px;
  font-weight: bold;
}
.close {
  width: 265px;
  height: 38px;
  background: #f9e4c1;
  border-radius: 43px;
  margin: 0 auto;
  color: #ff6969;
  line-height: 38px;
  text-align: center;
}
.btn {
  width: 188px;
  height: 52px;
  display: block;
  margin: 30px auto 0;
}
#app {
  padding: 0;

  background: transparent;
}
.can {
  background: transparent;
  height: auto;
  margin: 73% auto 0;
  display: block;
}
.im {
  width: 100%;
  position: absolute;
  z-index: -1;
}
.view-router {
  height: auto !important;
}
</style>
